<template>
    <div class="app-container">
        <!-- 输入表单 -->
        <el-form label-width="120px">
            <#list propList as prop>
                <el-form-item label="${prop}">
                    <el-input v-model="${entity?uncap_first}.${prop}" />
                </el-form-item>
            </#list>
            <el-form-item>
                <el-button
                        :disabled="saveBtnDisabled"
                        type="primary"
                        @click="saveOrUpdate()"
                >
                    保存
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import ${entity?uncap_first}Api from '@/api/${entity}'
    export default {
        data() {
            return {
                ${entity?uncap_first}: {}, // 初始化数据
                saveBtnDisabled: false // 保存按钮是否禁用，防止表单重复提交
            }
        },
        //页面渲染成功
        created() {
            if (this.$route.params.id) {
                this.fetchDataById(this.$route.params.id)
            }
        },
        methods: {
            saveOrUpdate() {
                // 禁用保存按钮
                this.saveBtnDisabled = true
                if (!this.${entity?uncap_first}.id) {
                    this.saveData()
                } else {
                    this.updateData()
                }
            },
            // 新增数据
            saveData() {
                // debugger
                ${entity?uncap_first}Api.save(this.${entity?uncap_first}).then(response => {
                    this.$message({
                        type: 'success',
                        message: response.message
                    })
                    this.$router.push('/${entity}/list')
                })
            },
            // 根据id查询记录
            fetchDataById(id) {
                ${entity?uncap_first}Api.getById(id).then(response => {
                    this.${entity?uncap_first} = response.data.record
                })
            },
            // 根据id更新记录
            updateData() {
                // 数据的获取
                ${entity?uncap_first}Api.updateById(this.${entity?uncap_first}).then(response => {
                    this.$message({
                        type: 'success',
                        message: response.message
                    })
                    this.$router.push('/${entity}/list')
                })
            }
        }
    }
</script>
